﻿<phone:PhoneApplicationPage 
    x:Class="WP7.LockerPlayer.MediaView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WP7.LockerPlayer"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
   
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <phone:PhoneApplicationPage.Resources>
        <local:PropertyNameToValueConverter x:Name="playConverter" PropertyPath="ShowPlay" />
        <local:PropertyNameToValueConverter x:Name="pauseConverter" PropertyPath="ShowPause"  />
        <!--<Visibility x:Name="ShowPlayButton"></Visibility>
        <Visibility x:Name="ShowPauseButton"></Visibility>-->
        <DataTemplate x:Name="NormalTemplate">

            <StackPanel Grid.ColumnSpan="2" Grid.RowSpan="2" Width="430" Margin="0,0,0,17" >
                <TextBlock Text="{Binding TrackTitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Grid.Row="0" Grid.Column="0"/>
                <TextBlock Text="{Binding AlbumTitle}" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" >

                </TextBlock>
                <TextBlock Text="{Binding ArtistName}" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"   >

                </TextBlock>
            </StackPanel>


        </DataTemplate>
        <DataTemplate x:Name="SelectedTemplate">


            <StackPanel Grid.ColumnSpan="2" Grid.RowSpan="2" Width="430" Margin="0,0,0,17">
                <TextBlock Text="{Binding TrackTitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Grid.Row="0" Grid.Column="0"/>
                <TextBlock Text="{Binding AlbumTitle}" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" >

                </TextBlock>
                <TextBlock Text="{Binding ArtistName}" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"   >

                </TextBlock>
            </StackPanel>





        </DataTemplate>
        <Style x:Key="MediaPlayerListItemStyle" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <!--<VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>-->
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenterSelected" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">

                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".65"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenterSelected" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <!--<VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>-->
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Rectangle x:Name="fillColor" Fill="#363b4c" RadiusX="10"  RadiusY="10" IsHitTestVisible="False" Opacity="0">

                            </Rectangle>
                            <Rectangle x:Name="fillColor2" Fill="#363b4c" RadiusX="10"  RadiusY="10" IsHitTestVisible="False" Opacity="0">

                            </Rectangle>



                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{StaticResource NormalTemplate}"/>
                            <ContentPresenter x:Name="contentPresenterSelected" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{StaticResource SelectedTemplate}"/>

                            <Rectangle x:Name="FocusVisualElement" Stroke="White" StrokeThickness="1" RadiusX="20" RadiusY="20" Visibility="Collapsed"/>

                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="95"/>
        </Grid.RowDefinitions>
        <!--Pivot Control-->
        <StackPanel Orientation="Vertical"  HorizontalAlignment="Center" VerticalAlignment="Bottom">

            <Image x:Name="backgroundAlbumArt" Stretch="UniformToFill" Opacity="0.4"  Width="300" Height="300" 
             />
            <Image x:Name="backgroundAlbumArtReflected" Stretch="UniformToFill" Opacity="0.1"  Width="300" Height="300" 
             >
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="ReflectionTransform" ScaleY="-1"/>
                      
                        <TranslateTransform x:Name="translationTransform"/>
                       
                    </TransformGroup>
                    
                    <!--<ScaleTransform x:Name="ReflectionTransform" ScaleY="1"/>-->
                </Image.RenderTransform>
                <!--<Image.OpacityMask>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="Black" Offset="0.0"/>
                        <GradientStop Color="LightGray" Offset="0.5"/>
                    </LinearGradientBrush>
                </Image.OpacityMask>-->

                <!--<Image.OpacityMask>

                <RadialGradientBrush Center="0.5,0.5">
                    <GradientStop Color="#00000000" Offset="1" />
                    <GradientStop Color="#20000000" Offset="0.8" />
                    <GradientStop Color="#FF000000" Offset="0" />
                </RadialGradientBrush>

            </Image.OpacityMask>-->
            </Image>
        </StackPanel>

        <controls:Pivot  Name="mediaPivot" Grid.Row="0">


            <controls:Pivot.TitleTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/WP7.LockerPlayer;component/Images/logo.png" VerticalAlignment="Top"/>
                        <TextBlock Text="{Binding Path=LocalizedResources.AppTitle, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Center" FontSize="33"/>
                    </StackPanel>
                </DataTemplate>
            </controls:Pivot.TitleTemplate>
            <!--Pivot item one-->
            <controls:PivotItem Header="{Binding Path=LocalizedResources.NowPlayingPivotHeader, Source={StaticResource LocalizedStrings}}" Name="nowPlayingItem">

                <Grid>
                    <ListBox x:Name="nowplayingListBox" Margin="0,0,-12,0"
                              Style="{StaticResource BlackListStyle}"
                              ItemsPanel="{StaticResource BlackListItemsPanelTemplate}"
                             ItemContainerStyle="{StaticResource MediaPlayerListItemStyle}"
                              ItemsSource="{Binding MediaPlayer.CurrentTracks}" SelectionChanged="nowplayingListBox_SelectionChanged">

                    </ListBox>

                </Grid>


            </controls:PivotItem>
            <controls:PivotItem Header="{Binding Path=LocalizedResources.AlbumsPivotHeader, Source={StaticResource LocalizedStrings}}" Name="albumItem">
                <ListBox x:Name="albumsList" Margin="0,0,-12,0" ItemsSource="{Binding MediaPlayer.CurrentAlbums}" 
                          Style="{StaticResource BlackListStyle}"
                              ItemsPanel="{StaticResource BlackListItemsPanelTemplate}"
                             ItemContainerStyle="{StaticResource BlackListItemStyle}"
                         SelectionChanged="albumsList_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,0,17" Width="430">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="171"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image Height="150" Width="150" Grid.Column="0" Margin="12,0,9,0" Source="{Binding Path=AlbumArtUrl}" Stretch="Uniform">
                                    <Image.Clip>
                                        <RectangleGeometry RadiusX="12" RadiusY="12" Rect="0,0,150,150" />
                                    </Image.Clip>
                                </Image>
                                <TextBlock Text="{Binding AlbumTitle}" Grid.Column="1" TextWrapping="Wrap"  Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center"/>
                                <!--<TextBlock Text="{Binding TrackCountMessage}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->

                            </Grid>


                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="{Binding Path=LocalizedResources.PlaylistPivotHeader, Source={StaticResource LocalizedStrings}}" Name="playlistItem">
                <ListBox x:Name="playlistsListBox" Margin="0,0,-12,0"
                         Style="{StaticResource BlackListStyle}"
                              ItemsPanel="{StaticResource BlackListItemsPanelTemplate}"
                             ItemContainerStyle="{StaticResource BlackListItemStyle}"
                         ItemsSource="{Binding Playlists}" SelectionChanged="playlistsListBox_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17" Width="430">
                                <TextBlock Text="{Binding PlaylistTitle}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <!--<TextBlock Text="{Binding PlaylistSizeMessage}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PivotItem>
        </controls:Pivot>


        <Grid Grid.Row="1" Name="MediaControls" >

            <Grid.RowDefinitions>
                <RowDefinition Height="25"/>
                <RowDefinition Height="70"/>
            </Grid.RowDefinitions>
            <TextBlock Name="status" Grid.ColumnSpan="3" HorizontalAlignment="Center" Grid.Row="0"/>
            <ProgressBar Name="progressInd" Style="{StaticResource PerformanceProgressBar}" Grid.ColumnSpan="3"  Grid.Row="0"></ProgressBar>

            <MediaElement Name="player" MediaEnded="player_MediaEnded" MediaFailed="player_MediaFailed" MediaOpened="player_MediaOpened" Grid.Column="0" AutoPlay="True"></MediaElement>
            <Grid Grid.Row="1" Name="mediaButtonGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>

                    <RowDefinition Height="60"/>
                    <RowDefinition Height="10"/>
                </Grid.RowDefinitions>
                <TextBlock  Name="elapsedTxt" Grid.Column="0" HorizontalAlignment="Left" TextAlignment="Left" Foreground="{StaticResource BaseForeground}" Grid.Row="0" Text="0:00:00" VerticalAlignment="Bottom"/>
                <ProgressBar x:Name="seekBar"  IsIndeterminate="False" Grid.Row="1" Grid.ColumnSpan="3" HorizontalAlignment="Stretch"/>
                <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal" Margin="0,0,0,0" Name="buttonPanel"  HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Button Name="previous" BorderThickness="0" Width="48" Height="48"  Margin="0,0,0,0" Padding="0,0,0,0" Click="previous_Click"   >
                        <Button.Template>
                            <ControlTemplate>

                                <Image Source="/WP7.LockerPlayer;component/Images/back.png"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
                            </ControlTemplate>
                        </Button.Template>

                    </Button>
                    <Button Name="play" BorderThickness="0" Width="48" Height="48"  Margin="0,0,0,0" Padding="0,0,0,0" Click="play_Click" >

                        <Button.Template>
                            <ControlTemplate>
                                <Image Source="/WP7.LockerPlayer;component/Images/play.png"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <Button Name="pause" BorderThickness="0" Width="48" Height="48"  Margin="0,0,0,0" Padding="0,0,0,0" Click="pause_Click"   >
                        <Button.Template>
                            <ControlTemplate>
                                <Image Source="/WP7.LockerPlayer;component/Images/pause.png"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
                            </ControlTemplate>
                        </Button.Template>

                    </Button>
                    <Button Name="next" BorderThickness="0" Width="48" Height="48"  Margin="0,0,0,0" Padding="0,0,0,0" Click="next_Click">
                        <Button.Template>
                            <ControlTemplate>
                                <Image Source="/WP7.LockerPlayer;component/Images/next.png"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
                            </ControlTemplate>

                        </Button.Template>
                    </Button>

                </StackPanel>

                <TextBlock  Name="durationTxt" Grid.Row="0" Grid.Column="2"  HorizontalAlignment="Right" TextAlignment="Right" Foreground="{StaticResource BaseForeground}" Text="0:00:00" VerticalAlignment="Bottom"/>

            </Grid>

        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>